<template>
  <view class="search" :style="{background: bg}">
    <u-search
      :placeholder="placeholder"
      v-model="keyword"
      :showAction="rightIcon"
      :actionText="actionText"
      :bgColor="bgColor"
      @search="search"
      @custom="search"
    ></u-search>
  </view>
</template>

<script>
export default {
  name: "lr-search",
  data(){
    return {
      keyword: '',
    }
  },
  props: {
//    keyword: {
//      type: String,
//      default: ''
//    },
    placeholder: {
      type: String,
      default: '请输入关键字'
    },
    // 右边控件是否展示
    rightIcon: {
      type: Boolean,
      default: false
    },
    // 右边控件的文字 默认是搜索
    actionText: {
      type: Boolean,
      default: false
    },
    //搜索框背景颜色
    bgColor: {
      type: String,
      default: '#F4F9FD'
    },
    //外面背景颜色
    bg: {
      type: String,
      default: '#ffffff'
    }
  },
  methods: {
    /**
     * 用户点击确定 或者按下键盘上的搜索按钮
     * @param {String} e 填写的值
     */
    search(e){
      this.$emit('search', e);
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  padding: 20rpx 32rpx;
}
</style>
